<template>
  <el-main>
    <div style="margin:0 0 15px 0;color:#67c23a;font-weight:600;font-size:15px;">读者信息</div>
    <!--读者信息-->
    <el-card class="box-card">
      <div slot="header" class="clearfix">
        <el-form :model="searchParm" label-width="80px" :inline="true" size="small">
          <el-form-item label="读者证号">
            <el-input v-model="searchParm.username"></el-input>
          </el-form-item>
          <el-form-item>
            <el-button icon="el-icon-search" size="small" round type="primary" @click="getByUserName">查询</el-button>
            <el-button icon="el-icon-delete" size="small" round type="danger" @click="resetBtn">重置</el-button>
          </el-form-item>
          <el-form-item label="还书时间">
            <el-date-picker v-model="returnTime" type="datetime" placeholder="选择还书日期"></el-date-picker>
          </el-form-item>
          <el-form-item>
            <el-button type="success" size="small" round icon="el-icon-edit-outline" @click="borrowBtn">借书</el-button>
          </el-form-item>
        </el-form>
      </div>
      <div class="text item">
        <el-form
          :model="showUser"
          ref="form"
          label-width="80px"
          :inline="true"
          size="small"
        >
          <el-form-item label="姓名">
            <el-input disabled v-model="showUser.learnNum"></el-input>
          </el-form-item>
          <el-form-item label="班级">
            <el-input disabled v-model="showUser.className"></el-input>
          </el-form-item>
          <el-form-item label="读者证号">
            <el-input disabled v-model="showUser.username"></el-input>
          </el-form-item>
          <el-form-item label="电话">
            <el-input disabled v-model="showUser.phone"></el-input>
          </el-form-item>
          <el-form-item label="证件号">
            <el-input disabled v-model="showUser.idCard"></el-input>
          </el-form-item>
          <el-form-item label="性别">
            <el-radio disabled v-model="showUser.sex" label="0">男</el-radio>
            <el-radio disabled v-model="showUser.sex" label="1">女</el-radio>
          </el-form-item>
          <el-form-item label="审核状态">
            <el-radio disabled v-model="showUser.checkStatus" label="0">未审核</el-radio>
            <el-radio disabled v-model="showUser.checkStatus" label="1">已审核</el-radio>
          </el-form-item>
          <el-form-item label="启用状态">
            <el-radio disabled v-model="showUser.userStatus" label="0">停用</el-radio>
            <el-radio disabled v-model="showUser.userStatus" label="1">启用</el-radio>
          </el-form-item>
        </el-form>
      </div>
    </el-card>
    <div style="margin:15px 0px;color:#67c23a;font-weight:600;font-size:15px;">图书列表</div>
    <div>
      <elt-transfer
        ref="eltTransfer"
        :show-query="true"
        :show-pagination="true"
        :pagination-call-back="paginationCallBack"
        :left-columns="leftColumns"
        :title-texts="['待选', '已选']"
        :button-texts="['添加', '删除']"
        :query-texts="['查询', '查询']"
        :table-row-key="(row) => row.bookId"
        v-model="tableData"
      >
        <!-- 可以使用插槽获取到列信息和行信息，从而进行数据的处理 -->
        <template v-slot:leftCondition="{}">
          <el-form-item label="图书名称">
            <el-input v-model="listParm.bookName" placeholder="图书名称"></el-input>
          </el-form-item>
          <el-form-item label="作者">
            <el-input v-model="listParm.bookAuther" placeholder="图书作者"></el-input>
          </el-form-item>
        </template>
        <template v-slot:rightCondition="{ scope }">
          <el-form-item label="图书名称">
            <el-input v-model="scope.bookName" placeholder="图书名称"></el-input>
          </el-form-item>
        </template>
      </elt-transfer>
    </div>
  </el-main>
</template>
<script>
import eltTransfer from 'elt-transfer/src/eltTransfer'
import { getByUserNameApi } from '@/api/reader'
import { getListApi } from '@/api/book'
import { borrowApi } from '@/api/borrow'

export default {
  //注册组件
  components: {
    'elt-transfer': eltTransfer
  },
  data () {
    return {
      returnTime: '',
      bookIds: [],
      //图书列表分页参数
      listParm: {
        currentPage: '',
        pageSize: '',
        bookName: '',
        bookAuther: ''
      },
      tableData: [],
      leftColumns: [
        { label: '图书名称', id: 'bookName', width: '120px' },
        { label: '图书分类', id: 'categoryName', width: '120px' },
        { label: '书架号', id: 'bookPlaceNum' },
        { label: '作者', id: 'bookAuther' },
        { label: '出版社', id: 'bookProduct' },
        { label: '库存', id: 'bookStore' },
      ],
      //读者信息搜索框
      searchParm: {
        username: ''
      },
      showUser: {
        readerId: '',
        learnNum: '',
        username: '',
        idCard: '',
        sex: '',
        phone: '',
        className: '',
        checkStatus: '',
        userStatus:'',
      },
    }
  },
  methods: {
    async paginationCallBack (obj) {
      // console.log(obj)
      //设置分页参数
      this.listParm.currentPage = obj.pageIndex
      this.listParm.pageSize = obj.pageSize
      //获取图书数据
      let res = await getListApi(this.listParm)
      return new Promise((resolve, reject) => {
        try {
          resolve({ total: res.data.total, data: res.data.records })
        } catch {
          reject()
        }
      })
    },
    clearTransfer () {
      this.$refs.eltTransfer.clear()
    },
    //获取读者信息
    async getByUserName () {
      let res = await getByUserNameApi(this.searchParm)
      if (res && res.code == 200 && res.data) {
        this.showUser = res.data
      } else {
        this.$message({ type: 'error', message: res.msg })
      }
    },
    //重置按钮
    resetBtn () {
      this.searchParm.username = ''
      this.showUser.learnNum = ''
      this.showUser.username = ''
      this.showUser.idCard = ''
      this.showUser.sex = ''
      this.showUser.phone = ''
      this.showUser.className = ''
      this.showUser.readerId = ''
      this.showUser.checkStatus = ''
      this.showUser.userStatus = ''
    },
    //借书按钮
    async borrowBtn () {
      this.bookIds = []
      if (!this.returnTime) {
        this.$message.error('请选择还书时间!')
        return
      }
      if (!this.showUser.readerId) {
        this.$message.error('请查询借书人信息是否存在!')
        return
      }
      if (this.tableData.length < 1) {
        this.$message.error('请选择要借的图书!')
        return
      }
      if(this.showUser.checkStatus=='0'){
        this.$message.error('你的身份未审核,请联系管理员审核!')
        return
      }
      if(this.showUser.userStatus=='0'){
        this.$message.error('你的账号已停用,请联系管理员申请启用!')
        return
      }
      //找到每个图书的ID
      for (let i = 0; i < this.tableData.length; i++) {
        this.bookIds.push(this.tableData[i].bookId)
      }
      //提交后台
      let parm = {
        readerId: this.showUser.readerId,
        bookIds: this.bookIds,
        returnTime: this.returnTime
      }
      let res = await borrowApi(parm)
      if (res && res.code == 200) {
        this.$message.success(res.msg)
        //1秒强制刷新页面
        setTimeout(function() {
          window.location.reload()
        }, 1000)
      }
    }
  }
}
</script>

<style scoped>
::v-deep .el-card__header {
  padding: 15px 0 0 0;
}

::v-deep .el-card__body {
  padding: 15px 0 0 0;
}

</style>
